<template>
  <div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <basic-opt :has_left="true">
      <template #search>
        <div class="opt-item">
          <el-input class="w-ipt" placeholder="请输入姓名进行筛选" suffix-icon="el-icon-search" v-model="search.name"
                    @keydown.enter="getSearchData" size="medium">
          </el-input>
        </div>
        <div class="opt-item">
          <el-input class="w-ipt" placeholder="请输入uuid进行筛选" suffix-icon="el-icon-search" v-model="search.uuid"
                    @keydown.enter="getSearchData" size="medium">
          </el-input>
        </div>
        <div class="opt-item">
          <el-input class="w-ipt" placeholder="请输入地址进行筛选" suffix-icon="el-icon-search"
                    v-model="search.address" @keydown.enter="getSearchData" size="medium">
          </el-input>
        </div>
        <div class="opt-item">
          <el-button @click="getSearchData" size="medium">搜索</el-button>
        </div>
        <div class="opt-item">
          <reset-search></reset-search>
        </div>
      </template>
    </basic-opt>

    <div class="table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
        <el-table-column prop="id" label="ID" width="150px"></el-table-column>
        <el-table-column prop="device_uuid" label="uuid" width="200px"></el-table-column>
        <el-table-column prop="device.remark" label="设备备注"></el-table-column>
        <el-table-column prop="face_id" label="人脸ID" width="200px"></el-table-column>
        <el-table-column prop="face.name" label="姓名" width="100px"></el-table-column>
        <el-table-column prop="image" label="人脸图片" width="200px">
          <template #default="scope">
            <el-popover placement="left" trigger="click">
              <img :src="scope.row.image" style="max-width:800px;max-height:800px;"/>
              <template #reference>
                <img :src="scope.row.image" style="max-width:180px;max-height:80px;">
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="device.direction" label="out/in" width="100px"></el-table-column>
        <el-table-column prop="temp" label="温度" width="100px"></el-table-column>
        <el-table-column prop="score" label="相似度" width="100px"></el-table-column>
        <el-table-column prop="time" label="记录时间" width="200px"></el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>

  <!--  mobile  -->
  <div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <div class="mobile-search-vertical">
      <el-input class="w-ipt" placeholder="请输入姓名进行筛选" suffix-icon="el-icon-search" v-model="search.name"
                @keydown.enter="getSearchData" size="medium">
      </el-input>
      <el-input class="w-ipt" placeholder="请输入uuid进行筛选" suffix-icon="el-icon-search" v-model="search.uuid"
                @keydown.enter="getSearchData" size="medium">
      </el-input>
      <el-input class="w-ipt" placeholder="请输入地址进行筛选" suffix-icon="el-icon-search"
                v-model="search.address" @keydown.enter="getSearchData" size="medium">
      </el-input>
      <el-button @click="getSearchData" size="medium">搜索</el-button>
    </div>
    <div class="moblie-table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
        <el-table-column prop="id" label="ID" width="150px"></el-table-column>
        <el-table-column prop="device_uuid" label="uuid" width="200px"></el-table-column>
        <el-table-column prop="device.remark" label="设备备注"></el-table-column>
        <el-table-column prop="face_id" label="人脸ID" width="200px"></el-table-column>
        <el-table-column prop="face.name" label="姓名" width="100px"></el-table-column>
        <el-table-column prop="image" label="人脸图片" width="200px">
          <template #default="scope">
            <el-popover placement="left" trigger="click">
              <img :src="scope.row.image" style="max-width:800px;max-height:800px;"/>
              <template #reference>
                <img :src="scope.row.image" style="max-width:180px;max-height:80px;">
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="device.direction" label="out/in" width="100px"></el-table-column>
        <el-table-column prop="temp" label="温度" width="100px"></el-table-column>
        <el-table-column prop="score" label="相似度" width="100px"></el-table-column>
        <el-table-column prop="time" label="记录时间" width="200px"></el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>
</template>

<script>
import API from '@/api/index.js'
import mixin from '@/mixin.js'

export default {
  name: 'outInLogs',
  mixins: [mixin],
  data() {
    return {
      search: {
        name: '',
        uuid: '',
        address: ''
      }
    }
  },
  mounted() {
    this.search.uuid = localStorage.getItem('device_uuid');
    if (this.search.uuid) {
      window.location.hash = "#/outInLogs?uuid=" + this.search.uuid;
    }
    this.getData();
  },
  methods: {
    async getData() {
      let self = this;
      self.loading = true;
      try {
        let params = {
          format: 1,
          name: self.search.name ? self.search.name : '',
          uuid: self.search.uuid ? self.search.uuid : '',
          address: self.search.address ? self.search.address : ''
        }
        self.addPageInfo(params)
        let res = await API.pushLogs(params.pageNumber, params.pageSize, params.format, params.name, params
            .uuid, params.address)
        self.loading = false;
        self.onGotPageData(res)
      } catch (err) {
        self.loading = false;
      }
    },
  },
  // 销毁
  beforeUnmount() {
    localStorage.removeItem('device_uuid')
  }
}
</script>
